<style>
    textArea{
        resize: none;
    }

    input[type=text], input[type=password] ,textArea{
        margin: 0 0 1em 0;
        width: 250px;
        margin-left: 10px;
        border: 1px gray solid;
        border-radius:5px;
        padding: 0.5em;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.20);
    }
    select{
        margin: 0 0 1em 0;
        margin-left: 10px;
        width: 70px;
        border: 1px gray solid;
        -webkit-border-radius:5px;
        -moz-border-radius:5px;
        border-radius:5px;
        padding: 0.3em;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.20);
    }

    button,input[type=submit]{
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border: 1px solid #494949;
        color: white;
        background: gray;
        width: 70px;
        padding: 5px 5px 5px 5px;
        margin-right: 5px;
    }

    #form_signup{

        height:auto;
        margin: 10px 200px 10px 200px; 
        padding-bottom: 5px;
        background: #dadada;
        border-radius:20px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 1);
    }

</style>
<script type="text/javascript">

    var array = [];
    $(document).ready(function() {

        function validate_input(attname, attinput) {
            if (!attname) {
                $(attinput).css('border-color', "red");
                $(attinput).css('border-width', "2px");
                array.push(false);
            } else {
                $(attinput).css('border-color', "gray");
                $(attinput).css('border-width', "1px");
                array.push(true);
            }
        }
        
        function validate_dropdown(attname, attinput) {
            if (attname <= 0) {
                $(attinput).css('border-color', "red");
                $(attinput).css('border-width', "2px");
                array.push(false);
            } else {
                $(attinput).css('border-color', "gray");
                $(attinput).css('border-width', "1px");
                array.push(true);
            }
        }

        function validate_pass(attname1, attname2, attinput1, attinput2) {

            if (attname1 && attname2) {
                if (attname1 != attname2) {
                    $(attinput1).css('border-color', "red");
                    $(attinput1).css('border-width', "2px");
                    $(attinput2).css('border-color', "red");
                    $(attinput2).css('border-width', "2px");
                    array.push(false);
                } else {
                    $(attinput1).css('border-color', "gray");
                    $(attinput1).css('border-width', "1px");
                    $(attinput2).css('border-color', "gray");
                    $(attinput2).css('border-width', "1px");
                    array.push(true);
                }
            } else {
                validate_input(attname1, attinput1);
                validate_input(attname2, attinput2);
            }
        }

        function validate_email(attemail, attinput) {
            if (attemail) {
                var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
                if (regex.test(attemail)) {
                    $(attinput).css('border-color', "gray");
                    $(attinput).css('border-width', "1px");
                    array.push(true);
                } else {
                    $(attinput).css('border-color', "red");
                    $(attinput).css('border-width', "2px");
                    array.push(false);
                }
            } else {
                validate_input(attemail, attinput);
            }
        }

        //validate form
        $("input[name='submit']").click(function() {
            var user = $("input[name='signup_username']").val();
            var pass = $("input[name='signup_password']").val();
            var conpass = $("input[name='signup_conpassword']").val();
            var idcard = $("input[name='signup_idcard']").val();
            var first = $("input[name='signup_firstname']").val();
            var last = $("input[name='signup_lastname']").val();
            var day = $("select[name='signup_day']").val();
            var month = $("select[name='signup_month']").val();
            var year = $("select[name='signup_year']").val();
            var address = $("textarea[name='signup_address']").val();
            var tele = $("input[name='signup_telephone']").val();
            var email = $("input[name='signup_email']").val();
            
            array.length = 0;
            
            validate_input(user, "input[name='signup_username']");
            validate_pass(pass, conpass, "input[name='signup_password']", "input[name='signup_conpassword']");
            validate_input(idcard, "input[name='signup_idcard']");
            validate_input(first, "input[name='signup_firstname']");
            validate_input(last, "input[name='signup_lastname']");
            validate_dropdown(day, "select[name='signup_day']");
            validate_dropdown(month, "select[name='signup_month']");
            validate_dropdown(year, "select[name='signup_year']");
            validate_input(address, "textarea[name='signup_address']");
            validate_input(tele, "input[name='signup_telephone']");
            validate_email(email, "input[name='signup_email']");
 
            for (var i in array) {
                if (!array[i]) {
                    return false;
                    break;
                }
            }
        });
        // keypress event only numer
        $("input[name='signup_idcard']").bind('keypress', function(e) {
            return (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) ? false : true;
        });
        $("input[name='signup_telephone']").bind('keypress', function(e) {
            return (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) ? false : true;
        });

        //set event color button
        $("button").mousedown(function() {
            $(this).css('background-color', "#555");
        });
        $("button").mouseup(function() {
            $(this).css('background-color', "gray");
        });
        $("button").mouseout(function() {
            $(this).css('background-color', "gray");
        });
        $("input[type='submit']").mousedown(function() {
            $(this).css('background-color', "#555");
        });
        $("input[type='submit']").mouseup(function() {
            $(this).css('background-color', "gray");
        });
        $("input[type='submit']").mouseout(function() {
            $(this).css('background-color', "gray");
        });


    });

    function goToIndex() {
        window.location = 'home/index';
    }

</script>
<div id="body_signup" style="vertical-align:top; height: auto"  >
    <!--;background-color: #f0f0f0;border: 1px solid #f0f0f0-->
    <div id="form_signup" align="center" > 
        <?
        echo form_open('home/validate_signup');
        ?>
        <table>
            <tr>
                <td colspan="2" align="center"><br><b><font size="5"> <? echo form_label("Sign Up"); ?> </font></b><br><br> </td>
            </tr>
            <tr>
                <td align="right">
                    <? echo form_label("Username : "); ?>

                </td>
                <td>
                    <? echo form_input('signup_username'); ?>
                </td>
            </tr>
            <tr>
                <td align="right">
                    <? echo form_label("Password : "); ?>

                </td>
                <td>
                    <? echo form_password('signup_password'); ?>
                </td>
            </tr>
            <tr>
                <td align="right">
                    <? echo form_label("Confirm Password : "); ?>

                </td>
                <td>
                    <? echo form_password('signup_conpassword'); ?>
                </td>
            </tr>
            <tr>
                <td align="right">
                    <? echo form_label("ID Card Number: "); ?>

                </td>
                <td>
                    <? echo form_input('signup_idcard'); ?> 
                    &nbsp;
                    <? echo form_button('', 'Check'); ?>
                </td>
            </tr>
            <tr>
                <td align="right">
                    <? echo form_label("First Name : "); ?>

                </td>
                <td>
                    <? echo form_input('signup_firstname'); ?>
                </td>
            </tr>
            <tr>
                <td align="right">
                    <? echo form_label("Last Name : "); ?>

                </td>
                <td>
                    <? echo form_input('signup_lastname'); ?>
                </td>
            </tr>
            <tr>
                <td align="right">
                    <? echo form_label("Birthday : "); ?>

                </td>
                <td>
                    <? echo form_dropdown('signup_day',array('Day')) ?>
                    <? echo form_dropdown('signup_month',array('Month','January'),array(),'style="width:100px;margin-left: 1px;"') ?>
                    <? echo form_dropdown('signup_year',array('Year'),array(),'style="margin-left: 1px;"') ?>
                </td>
            </tr>
            <tr>
                <td align="right">
                    <? echo form_label("Address : "); ?>

                </td>
                <td>
                    <? echo form_textarea('signup_address'); ?>
                </td>
            </tr>
            <tr>
                <td align="right">
                    <? echo form_label("Telephone : "); ?>

                </td>
                <td>
                    <? echo form_input('signup_telephone'); ?>
                </td>
            </tr>
            <tr>
                <td align="right">
                    <? echo form_label("E-mail : "); ?>

                </td>
                <td>
                    <? echo form_input('signup_email'); ?>
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <?
                    echo form_submit('submit', 'Agree');
                    echo form_button('', 'Cancel', 'onClick="goToIndex()"');
                    ?>
                </td>
            </tr>
        </table>

        <?php echo form_close(); ?>
    </div>
</div>
